<!-- 新增/修改弹框 -->
<template>
  <!-- 新增/修改弹窗 -->
  <el-dialog
    v-model="dialogDetail.visible"
    width="1100px"
    :fullscreen="mobile === 'mobile'"
    :title="dialogDetail.title"
    draggable
    close-icon="CloseBold"
    :close-delay="200"
    @close="closeDialog(false)"
  >
    <el-tabs v-model="activeTabName" @tab-click="handleTabChange">
      <el-tab-pane label="项目信息" name="base">
        <base-info v-if="activeTabName == 'base'" :id="dialogDetail.id" />
      </el-tab-pane>
      <el-tab-pane label="项目劳动合同" name="labor-contract">
        <labor-contract v-if="activeTabName == 'labor-contract'" :id="dialogDetail.id"
      /></el-tab-pane>
    </el-tabs>
  </el-dialog>
</template>

<script lang="ts" setup>
import LaborContract from "./components/LaborContract/index.vue";
import BaseInfo from "./components/BaseInfo/index.vue";
import { useScreen } from "@/store/modules/screen";
import type { TabsPaneContext } from "element-plus";

//声明变量
const activeTabName = ref<any>("base");
const screenStore = useScreen();
const mobile = computed(() => screenStore.device);
const props = defineProps({
  dialogDetail: {
    type: Object,
    default: () => ({
      visible: false,
      title: "新增",
      footBtn: "确认新增",
      id: 0,
    }),
  },
});
const { dialogDetail } = toRefs(props);
const emit = defineEmits(["sendClose"]);

//选项卡改变
const handleTabChange = (tab: TabsPaneContext, event: Event) => {
  activeTabName.value = tab.paneName;
};
const initForm = async function () {
  activeTabName.value = "base";
};
onMounted(async () => {
  initForm();
});

/**
 * 关闭弹窗
 */
function closeDialog(needRefresh: boolean) {
  emit("sendClose", needRefresh);
}
</script>
<style lang="scss" scoped></style>
